{% extends "base.html" %}
{% block script %}
    <script type="text/javascript" src="/site_media/js/confirmation_page.js"></script>
{% endblock %}
{% block content %}
    <div class="cart-info" style="border: 2px solid #DFC9B2">
        <div class="cart-title"><font>&nbsp&nbsp&nbsp&nbsp;Consignee Name</font></div>
        <div style="padding-left: 60px; font-size: 20px;">{{my_address.name}}</div>
        <hr>
        <div class="cart-title"><font>&nbsp&nbsp&nbsp&nbsp;Delivery Address</font></div>
        <div style="padding-left: 60px; font-size: 20px">
            {{my_address.address}},&nbsp;{{my_address.postnumber}},&nbsp;{{my_address.city}},&nbsp;
            {% if my_address.state %}
                {{my_address.state}}
            {% endif %}
            {{my_address.country}}
        </div>
        <hr>
        <div class="cart-title"><font>&nbsp&nbsp&nbsp&nbsp;Phone Number</font></div>
        <div style="padding-left: 60px; font-size: 20px">{{my_address.phone}}</div>
        <hr>
        <div class="cart-title"><font>&nbsp&nbsp&nbsp&nbsp;Shopping List</font></div>
	<table id="shopping_cart" cellspacing="20" >
	    <thead>
		<tr align="center">
		    <th colspan="5">Product</th>
		    <th colspan="5">Price</th>
                    <th>Quantity</th>
		    <th class="right">Total</th>
		</tr>
	    </thead>
	    <tfoot>
		<tr>
		    <th id="cart-subtotal" colspan="15" align="right">
			Cart Subtotal: {{ cart_subtotal }}&nbsp;€
		    </th>
                </tr>
                {% if user.is_authenticated %}
                    {% if cart_items %}
                        <tr id="check-area">
                	    <th colspan="15" align="right">
                            <a href="javascript:void(0)" onclick="generate_order({{my_address.id}})"><img src="/site_media/images/icon_checkout.gif" alt="Checkout" /></a>
                            <div style="display:none">
                                <form method="POST" action="http://webcourse.cs.hut.fi/payment/pay/" id="payment_form">
                                    <input type="hidden" name="pid" id="pid" value="" />
                                    <input type="hidden" name="sid" value="zxhwd2008" />
                                    <input type="hidden" name="success_url" value="http://localhost:8000/payment/success" />
                                    <input type="hidden" name="cancel_url" value="http://localhost:8000/payment/cancel" />
                                    <input type="hidden" name="error_url" value="http://localhost:8000/payment/error" />
                                    <input type="hidden" name="checksum" id="checksum" value="" />
                                    <input type="hidden" id="id_amount" name="amount" value="{{ cart_subtotal }}" >
                                </form>
                            </div>
                        </th>
                    {% endif %}
		{% endif %}
	    </tfoot>
	    <tbody>
		{% if cart_items %}
		    {% for item in cart_items %}
			<tr id="item-info-{{ item.id }}" align="center">
                            <td align="center">
                                <img src="/{{ item.image }}" />
                            </td>
			    <td colspan="4">
				<a href="/products/{{ item.product_id}}" class="cart" style="color: blue;">
				    {{ item.name }}
				</a>
			    </td>
			    <td colspan="5" align="center"><font>{{ item.price }}&nbsp;€</font></td>
			    <td>
				{{item.quantity}}
                            </td>
			    <td class="table-right" id="one-item-total-{{ item.id }}" align="center">
                                <font>{{ item.total }}&nbsp;€</font>
                                <input type="hidden" value="{{item.product_id}}" id="product-id-{{item.product_id}}" />
                            </td>
			</tr>
		    {% endfor %}
		{% else %}
		    <tr>
			<td colspan="14" style="height:30px;" id="cart-empty">
			    Your cart is empty.
			</td>
		    </tr>
		{% endif %}
	    </tbody>
	</table>
    </div>
{% endblock%}